<script setup>
import { ref, onMounted } from 'vue'
import { labelPageList, saveLabel, getLabel, updateLabel, deleteLabel, batchDelLabel } from '@/api/article'
import { ElMessageBox, ElMessage } from 'element-plus';

// loading效果
const isLoading = ref(true)
// 设置分页参数
const pageParams = ref({
  page: 1,
  limit: 8,
  name: ''
})
// 标签集合
const labelList = ref([])
// 总数
const total = ref(0)
// 获取分页列表
const getLabelPageList = async () => {
  const res = await labelPageList(pageParams.value)
  total.value = res.data.total
  labelList.value = res.data.records
}
// 搜素
const search = () => {
  getLabelPageList()
}
// 重置
const reset = () => {
  pageParams.value.name = ''
  getLabelPageList()
}
// 页面变化了
const handleCurrentChange = () => {
  getLabelPageList()
}
// 组件挂载之后渲染
onMounted(() => {
  getLabelPageList()
  isLoading.value = false
})

// 弹层开关
const isDialog = ref(false)
// 标签参数
const labelName = ref(null)
// 标签控制
const isLabelName = ref(false)
// 标签控制
const isTag = ref(false)
// 新增标签控制
const isBtnTag = ref(true)

// 取消按钮
const close = () => {
  labelName.value = null
  color.value = ''
  isDialog.value = false
  isTag.value = false
  isBtnTag.value = true
  labelId.value = null
}
// 新增标签
const addLabel = async () => {
  let model = '新增'
  if (labelId.value) {
    model = '修改'
    await updateLabel(labelId.value, labelName.value, color.value)
  } else {
    console.log('新增');
    await saveLabel(labelName.value, color.value)
  }
  pageParams.value.page = 1
  // 刷新
  getLabelPageList()
  ElMessage.success(model + '成功')
  close()
}
const color = ref('#409eff')
// 标题
const title = ref('')
// 标签Id
const labelId = ref(null)
// 弹层打开
const operation = async (id) => {
  isDialog.value = true
  if (id) {
    title.value = '修改标签'
    labelId.value = id
    // 回显数据
    const res = await getLabel(id)
    labelName.value = res.data.labelName
    color.value = res.data.btColor
    isBtnTag.value = false
    isTag.value = true
  } else {
    title.value = '新增标签'
  }
}
// 删除标签
const delLabel = (id) => {
  ElMessageBox.confirm("您确定要删除吗?", "删除标签",
    {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      type: 'error',
      buttonSize: 'small',
      showClose: false
    }
  ).then(async () => {
    await deleteLabel(id)
    getLabelPageList()
    ElMessage.success('删除成功')
  })
}

// 被选择的标签id
const labelListIds = ref(null)
// 多选框
const handleSelectionChange = (event) => {
  labelListIds.value = event.map(item => item.id)
}
// 批量删除
const batchDel = () => {
  if (labelListIds.value == null) {
    return
  }
  ElMessageBox.confirm("您确定要批量删除吗?", "批量删除",
    {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      type: 'error',
      buttonSize: 'small',
      showClose: false
    }
  ).then(async () => {
    await batchDelLabel({
      items: labelListIds.value
    })
    getLabelPageList()
    ElMessage.success('删除成功')
  })
}
</script>
<template>
  <div class="div">
    <el-card class="label">
      <template #header>
        <div class="card-header">
          <span style="color: #131f2b;font-weight: bold;">标签管理</span>
        </div>
      </template>
      <!-- 按钮区域 -->
      <el-row>
        <el-col :span="6" style="margin-right: 10px;">
          <el-form-item label="标签名称：" prop="">
            <el-input placeholder="请输入标签名称" v-model="pageParams.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 80px;" @click="search">
            <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
            <span style="margin-right: 30px;">搜索</span>
          </el-button>
          <el-button type="info" style="width: 80px;" @click="reset">
            <i class="iconfont icon-zhongzhi" style="margin-right: 8px;font-size: 14px;"></i>
            <span style="margin-right: 30px;">重置</span>
          </el-button>
        </el-col>
        <el-col :span="13" style="display: flex;justify-content: end;margin-left: 30px;">
          <el-button type="primary" style="width: 100px;" @click="operation(null)">
            <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
            <span style="margin-right: 28px;">新增标签</span>
          </el-button>
          <el-button v-permissionDirective type="danger" style="width: 100px;" @click="batchDel">
            <i class="iconfont icon-shanchupiliangshanchu" style="font-size: 15px;"></i>
            <span style="margin-right: 28px;">批量删除</span>
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-row style="margin-top: 10px;">
        <el-table height="458px" v-loading="isLoading" :data="labelList" style="width: 100%"
          @selection-change="handleSelectionChange" :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="60" />
          <el-table-column property="id" label="序号" width="100"></el-table-column>
          <el-table-column property="labelName" label="标签" width="230">
            <template #default="scope">
              <el-tag>{{ scope.row.labelName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="labelCount" label="统计" width="100" />
          <el-table-column prop="labelCount" label="颜色" width="180">
            <template #default="scope">
              <el-button closable :color="scope.row.btColor"></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="220"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="220"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <!-- 操作按钮 -->
              <div class="div" style="display: flex;margin-left: 35px;">
                <el-button v-permissionDirective type="primary" class="centet-icon" @click="operation(scope.row.id)">
                  <i class="iconfont icon-xiugai" style="margin: 0 auto;"></i>
                </el-button>
                <el-button v-permissionDirective @click="delLabel(scope.row.id)" type="danger"
                  style="display: flex;align-items: center;margin-left: 3px;">
                  <i class="iconfont icon-shanchu" style="margin: 0 auto;"></i>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!-- 空状态 -->
          <template v-slot:empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
      </el-row>
      <!-- 分页条区域 -->
      <el-pagination class="pagination" hide-on-single-page :default-page-size="8" background :total="total"
        layout="total, prev, pager, next, jumper" v-model:current-page="pageParams.page"
        @current-change="handleCurrentChange"></el-pagination>
    </el-card>
  </div>
  <!-- 弹层 -->
  <el-dialog v-model="isDialog" :title="title" width="30%" :before-close="close">
    <!-- 标签位置 -->
    <el-form-item label="标签:" prop="" style="margin-top: 15px;">
      <el-tag v-if="isTag" @click="isLabelName = true, isTag = false">{{ labelName }}</el-tag>
      <el-input v-if="isLabelName" ref="InputRef" v-model="labelName" class="w-20" size="small"
        @blur="isTag = true, isLabelName = false, isBtnTag = false" />
      <el-button v-if="isBtnTag" class="button-new-tag" size="small" @click="isLabelName = true">
        + New Tag
      </el-button>
    </el-form-item>
    <el-form-item label="颜色" prop="">
      <el-color-picker v-model="color" size="large" />
    </el-form-item>
    <!-- 操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close" size="small">取消</el-button>
        <el-button v-permissionDirective type="primary" @click="addLabel" size="small">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.label {
  width: 1325px;
  background-color: #fff;
  border: none;
  height: 675px;
  border-radius: 6px;

  .centet-icon {
    display: flex;
    align-items: center;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 67px;
  }
}
</style>